<template>
  <div class="dropdown-warp">
      <a href="javascript:;" class="btn" @click="btnClick"><slot></slot></a>
      <div class="menu-wrap" v-show="isShow">
          <slot name='dropdown'></slot>
      </div>
  </div>
</template>

<script>
export default {
    name:'Dropdown',
    data(){
        return{
            isShow:false,
            activeIndex:0,
        }
    },
    provide:{
        parentActiveIndex:0
    },
    created() {
        this.initEvent()
    },
    methods: {
        initEvent(){
            this.$on('activeChange',(index)=>{
                this.activeIndex=index
                this.$emit('change',index)
            })
        },
        btnClick(){
            this.isShow=!this.isShow
        }
    },
}
</script>

<style lang="scss" scoped>
.menu-warp{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:rgba(0,0,0,0.1);
}
</style>